<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
<head>
    <%@include file="/WEB-INF/views/header.jsp" %>
    <title>微学习</title>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/index.css"/>
    <link rel="stylesheet" type="text/css"
          href="${pageContext.request.contextPath}/plugins/bootstrap4/css/bootstrap.min.css"/>

    <link rel="canonical" href="https://quilljs.com/standalone/full/">
    <link type="application/atom+xml" rel="alternate" href="https://quilljs.com/feed.xml"
          title="Quill - Your powerful rich text editor"/>
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/KaTeX/0.7.1/katex.min.css"/>
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/monokai-sublime.min.css"/>
    <link rel="stylesheet" href="//cdn.quilljs.com/1.3.6/quill.snow.css"/>

    <script>
        $("#article_ms_nav").addClass("active")
    </script>
</head>
<body>

<style>
    h1 {
        color: #29B4F0;
        text-decoration: none;
        font-size: 30px;
    }

    .node-header {
        font-size: 12px;
        color: #ccc;
    }
</style>

<div class="d-flex flex-row" style="background-color: #eeeeee; height: 850px;">

    <div class="d-flex flex-column col-md-9 p-3">

        <div id="grades" class="d-flex p-2">
            <form>
                <div class="input-group mt-5">
                    <div class="input-group-prepend">
                        <span class="input-group-text bg-light">标题：</span>
                    </div>
                    <input type="hidden" value="${article.article_id}" name="id" id="aId"/>
                    <input type="text" class="form-control" name="title" value="${article.article_title}" id="title"
                           required autofocus/>
                </div>
            </form>

        </div>

        <div class="d-flex flex-column mt-2 p-2" style="flex:7; ">

            <div id="standalone-container" style="height: 500px;">
                <div id="toolbar-container">
                <span class="ql-formats">
                    <select class="ql-font"></select>
                    <select class="ql-size"></select>
                </span>
                    <span class="ql-formats">
                    <button class="ql-bold"></button>
                    <button class="ql-italic"></button>
                    <button class="ql-underline"></button>
                    <button class="ql-strike"></button>
                </span>
                    <span class="ql-formats">
                    <select class="ql-color"></select>
                    <select class="ql-background"></select>
                </span>
                    <span class="ql-formats">
                    <button class="ql-script" value="sub"></button>
                    <button class="ql-script" value="super"></button>
                </span>
                    <span class="ql-formats">
                    <button class="ql-header" value="1"></button>
                    <button class="ql-header" value="2"></button>
                    <button class="ql-blockquote"></button>
                    <button class="ql-code-block"></button>
                </span>
                    <span class="ql-formats">
                    <button class="ql-list" value="ordered"></button>
                    <button class="ql-list" value="bullet"></button>
                    <button class="ql-indent" value="-1"></button>
                    <button class="ql-indent" value="+1"></button>
                </span>
                    <span class="ql-formats">
                    <button class="ql-direction" value="rtl"></button>
                    <select class="ql-align"></select>
                </span>
                    <span class="ql-formats">
                    <button class="ql-link"></button>
                    <button class="ql-image"></button>
                    <button class="ql-video"></button>
                    <button class="ql-formula"></button>
                </span>
                    <span class="ql-formats">
                    <button class="ql-clean"></button>
                </span>
                </div>
                <div id="editor-container">

                </div>
                <div class="d-flex p-3">
                    <button class="btn btn-success" id="submit_article">提交</button>
                </div>
            </div>
            <script src="//cdnjs.cloudflare.com/ajax/libs/KaTeX/0.7.1/katex.min.js"
                    type="8d880c029f19ef17c7955496-text/javascript"></script>
            <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"
                    type="8d880c029f19ef17c7955496-text/javascript"></script>
            <script src="//cdn.quilljs.com/1.3.6/quill.min.js" type="8d880c029f19ef17c7955496-text/javascript"></script>
            <script type="8d880c029f19ef17c7955496-text/javascript">
              quill = new Quill('#editor-container', {
                modules: {
                  syntax: true,
                  toolbar: '#toolbar-container'
                },
                theme: 'snow'
              });
              quill.root.innerHTML = '${article.article_content}'


            </script>
            <script>
                <%--quill.root.innerHTML = '${article.article_content}'--%>
            </script>
            <script src="https://ajax.cloudflare.com/cdn-cgi/scripts/2448a7bd/cloudflare-static/rocket-loader.min.js"
                    data-cf-nonce="8d880c029f19ef17c7955496-" defer=""></script>
            <script src="${base}/js/articleManage/edit.js"></script>
        </div>

    </div>
    <%@include file="/WEB-INF/views/linkNav.jsp" %>
</div>
<div></div>
<%@include file="/WEB-INF/views/footer.jsp" %>
</body>
</html>